<meta charset="UTF-8">
<div id="add-leak-month-detail">
    <Row style="margin:10px;height: 32px;">
        <div class="fl">
            <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
        </div>
        <div style="position: relative;width: 260px;" class="fl">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-click="cleanSelectedDev" @on-change="sosoValueChange" @on-blur="blur" :readonly="readonly" @on-focus="focus" :placeholder="placeholder" @on-click="focus"></i-input>
                <transition name="fade">
                    <ul class="search-item-wrapper" v-show="isShowMatchDev">
                        <li class="demo-auto-complete-item" v-for="item in filterData">
                            <div class="demo-auto-complete-group" v-show="item.devices.length" @click="sosoSelectGroup(item.groupname)">
                                <span>{{ item.groupname }}</span>
                            </div>
                            <div v-for="option in item.devices" :value="option.groupname" :key="option.groupname" class="ivu-select-item">
                                <span :style="{color:option.isOnline ? '#33DAD0':'#B1BBC2'}" @click="sosoSelect(option)" class="demo-auto-complete-title">{{ option.allDeviceIdTitle }}</span>
                            </div>
                        </li>
                    </ul>
                </transition>
            </div>
        </div>
        <div style="margin-left:10px;width: 80px;position: relative;" class="fl">
            <i-select v-model="tank">
                <i-option v-for="(item,index) in oilIndexLabel" :value="item.value" :key="index">{{item.label}}</i-option>
            </i-select>
        </div>
        <div style="padding-left: 10px;" class="fl">
            <span>{{$t("reportForm.selectTime")}}:</span>
            <date-picker type="month" v-model="month" :clearable="false" style="width:120px" placement="bottom-start" :options="dateOptions"></date-picker>
        </div>
        <div style="margin-left:20px;" class="fl">
            <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
        </div>
        <div style="margin-left:10px;" class="rt">
            <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
        </div>
    </Row>
    <div style="margin:10px;">
        <i-table ref="detailTable" highlight-row @on-row-click="queryTracks" :columns="columns" size="small" :data="tableData" :height="tableHeight" :loading="loading"></i-table>
    </div>
    <div style="padding:0px 10px; position: relative;">
        <div :style="{width: '100%',height:'400px',position: 'relative',boxSizing: 'border-box'}">
            <div style="position: absolute;left: 0px;top: 0px;width: 40%;padding-right: 10px;">
                <div style="bottom: 0px;border: 1px solid #E8EAEC;height: 400px;">
                    <div id="add-leak-map" class="full"></div>
                </div>
            </div>
            <div style="position: absolute;right: 0px;top: 0px;width: 60%;bottom: 0px;">
                <div class="full" style="border: 1px solid #E8EAEC;">
                    <div id="add-leak-charts" style="height:400px"></div>
                </div>
            </div>
        </div>
    </div>
</div>